import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom'
const { Header, Content, Sider } = Layout;

const items2: MenuProps['items'] = [
    {
        key: '/',
        icon: <UserOutlined />,
        label: '访客管理',
        
        children: [
            {
                key: '/visitror/list',
                label: '访客列表'
            },
            {
                key: '/visitror/desc',
                label: '访客详情'

            }
        ]
    }]

const VisitorIndex: React.FC = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const navigate = useNavigate()
    return (
        <Layout>
            <Header className="header">
                <div className="logo">logo</div>
                <div className="logout">退出</div>
                {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} /> */}
            </Header>
            <Layout>
                <Sider width={200} style={{ background: colorBgContainer }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['/']}
                        defaultOpenKeys={['/']}
                        style={{ height: '100%', borderRight: 0 }}
                        items={items2}
                        onSelect={(path) => {
                        console.log('00', path)
                            navigate(path.selectedKeys[0]                                )
                        }}
                    />
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>VisitorIndex</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default VisitorIndex;
